<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>数据库的读取修改</title>
	<link rel="stylesheet" href="../bootstarp/css/bootstrap.css" />
	<style>
		.bj,
		.tj {
			cursor: pointer !important;
		}

		#mask {
			display: none;
			width: 100%;
			height: 100%;
			position: fixed;
			/* 利用固定定位的好处：页面还可以上下翻动，但是始终处于灰色背景下 */
		}

		#login {
			display: none;
			background: white;
			width: 400px;
			height: 250px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -200px;
			margin-top: -125px;
		}

		#login #close_login {
			position: absolute;
			left: 350px;
			top: 10px;
			font-size: 20px;
			width: 20px;
			height: 20px;
			background: skyblue;
			cursor: pointer;
		}
	</style>
	<!-- <script>
			$(function(){
				var _this=null;
				$('.t_r').on("click",".bj",function(){
					var list=[];
					_this=$(this);
					var item=null;
					//遍历节点获取文本元素
					$.each(_this.prevAll(),function(i){
					item=_this.siblings()[i];
						var text=$(item).text();
						// 可向数组的末尾添加一个或多个元素，并返回新的长度
						list.push(text);
					});
					// 颠倒其元素的顺序
					var new_list=list.reverse();
					$('#bj #sname').val(new_list[1]);
					$('#bj #sclass').val(new_list[0]);
					$('#bj #sid').val(new_list[2]);
					_this.addClass('aa');
					var slist=[];
					var tem=null;
					$('#bj').on("click",".bj_submit",function(){
						var s_name=$('#sname').val().trim();
						var s_id=$('#sid').val().trim();
						var s_class=$('#sclass').val().trim();
						slist=[s_id,s_name,s_class];
						var t=$('.aa').siblings();
						$.each(slist,function(n){
							tem=t[n];
							$(tem).text(slist[n]);
						});
						_this.removeClass('aa');
						$('#bj').modal('hide');
					});
				});
				$('.t_r').on("click",".tj",function(){
					var $_this=$(this);				
					$_this.parent().addClass('tt');
					$('#tj').on("click",".tj_submit",function(){
						var t_name=$('#tname').val().trim();
						var t_id=$('#tid').val().trim();
						var t_class=$('#tclass').val().trim();
						var thtml='<tr><td>'+t_id+'</td><td>'+t_name+'</td><td>'+t_class+'</td><td class="bj" data-toggle="modal" data-target="#bj">编辑</td></tr>';
						$('.tt').before(thtml);
						$('#tid').val("");
						$('#tname').val("");
						$('#tclass').val("");
						$_this.parent().removeClass('tt');
						$('#tj').modal('hide');
					});
				});
			});
		//</script> -->
	
</head>

<body>
	<div class="container" style="padding-top: 50px;">
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<table class="table table-hover table-bordered">
					<thead></thead>
					<tbody class="t_r">
						<tr>
							<td colspan="4" style="text-align: center;">添加修改</td>
						</tr>
						<tr>
							<td>学号</td>
							<td>姓名</td>
							<td>班级</td>
							<td>操作</td>
						</tr>
						<tr>
							<td>201801</td>
							<td>安小明</td>
							<td>安卓1801</td>
							<td class="bj" data-toggle="modal" data-target="#bj">编辑</td>
						</tr>
						<tr>
							<td>201802</td>
							<td>桌小明</td>
							<td>安卓1801</td>
							<td class="bj" data-toggle="modal" data-target="#bj">编辑</td>
						</tr>
						<tr>
							<td>201803</td>
							<td>好小明</td>
							<td>安卓1801</td>
							<td class="bj" data-toggle="modal" data-target="#bj">编辑</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td class="tj" id="tj">添加</td>
						</tr>
					</tbody>
				</table>
			</div>
			
		</div>
	</div>
	<div id="mask"></div>
			<div id="login">
				<span id="close_login">×</span><br
				姓名:<input type="text" placeholder="姓名">
			</div>
</body>

</html>